﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sales_report.aspx.cs" Inherits="E1_eMart.admin.sales_report" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="vi" xml:lang="vi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
    <title>eMart Manager's Site</title>
    <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/dashboard.css">
</head>
<meta name="robots" content="NONE,NOARCHIVE">
<body class="dashboard">
    <!-- Container -->
    <div id="container">
        <!-- Header -->
        <div id="header">
            <div id="branding">
                <h1 id="site-name">
                    eMart Administration</h1>
                    <span><a href="../index.aspx">eMart Home</a></span>
            </div>
            <div id="user-tools">
                Chào mừng bạn, <strong>John Lennon</strong>. <a href="#">Đổi mật khẩu</a> / <a href="#">
                    Thoát</a>
            </div>
        </div>
        <!-- END Header -->
        <div class="admin_nav">
            <ul>
                <li><a href="dashboard.aspx">
                    <img src="../images/house.png" alt="">Admin Home</a></li>
                <li><a href="usermanagement.aspx">
                    <img src="../images/page_edit.png" alt="">User Management</a></li>
                <li><a href="dashboard.aspx">
                    <img src="../images/plugin_edit.png" alt="">Statistics</a></li>
                <li><a href="product_managerment.aspx">
                    <img src="../images/table_edit.png" alt="">Product Management</a></li>
                <li><a href="comment_management.aspx" target="_blank">
                    <img src="../images/world.png" alt="">Comment Management</a></li>
                <li><a href="producttype_management.aspx">
                    <img src="../images/table_edit.png" alt="">Product Type Management</a></li>
            </ul>
        </div>
        <style type="text/css">       
        <!--
        .admin_nav {
            margin-top:10px;
            margin-left:15px;
            vertical-align:middle;
        }
        .admin_nav img {
            vertical-align:middle;
            margin-right:5px;
        }
        .admin_nav ul {
            padding:0;
            margin:0;
        }
        .admin_nav li {
            display:inline-block;
            margin-left:0;
        }
        .admin_nav li a {
            display:inline-block;
            padding:5px 20px;
            background-color: #c7e0c7;
            font-size:11px;
        }
        .admin_nav li a:active {
            background-color: #b3c9b3;
        }
        -->
    </style>
        <!-- Content -->
        <div id="content" class="colMS">
            <h1>
                Site quản trị hệ thống.</h1>
            <br class="clear">
            <div id="main_content">
                <div class="box">
                    <div class="left">
                    </div>
                    <div class="right">
                    </div>
                    <div class="heading">
                        <h1 style="background-image: url('view/image/home.png');">
                            Statictis Dashboard</h1>
                    </div>
                    <div class="content">
                        <div style="display: inline-block; width: 100%; margin-bottom: 15px; clear: both;">
                            <div style="float: left; width: 49%;">
                                <div style="background: #547C96; color: #FFF; border-bottom: 1px solid #8EAEC3; padding: 5px;
                                    font-size: 14px; font-weight: bold;">
                                    Overview</div>
                                <div style="background: #FCFCFC; border: 1px solid #8EAEC3; padding: 10px; height: 180px;">
                                    <table cellpadding="2" style="width: 100%;">
                                        <tbody>
                                            <tr>
                                                <td width="80%">
                                                    Total Sales:
                                                </td>
                                                <td align="right">
                                                    20000$
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Total Sales This Month:
                                                </td>
                                                <td align="right">
                                                    9500$
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Total Orders:
                                                </td>
                                                <td align="right">
                                                    18
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    No. Of Purchased:
                                                </td>
                                                <td align="right">
                                                    3
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    No. Products:
                                                </td>
                                                <td align="right">
                                                    1803
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Total Product Fee:
                                                </td>
                                                <td align="right">
                                                    1803$
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div style="float: right; width: 49%;">
                                <div style="background: #547C96; color: #FFF; border-bottom: 1px solid #8EAEC3;">
                                    <div style="width: 100%; display: inline-block;">
                                        <div style="float: left; font-size: 14px; font-weight: bold; padding: 7px 0px 0px 5px;
                                            line-height: 12px;">
                                            Statistics</div>
                                        <div style="float: right; font-size: 12px; padding: 2px 5px 0px 0px;">
                                            Select Range:
                                            <select id="range" onchange="getSalesChart(this.value)" style="margin: 2px 3px 0 0;">
                                                <option value="day">Today</option>
                                                <option value="week">This Week</option>
                                                <option value="month">This Month</option>
                                                <option value="year">This Year</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div style="background: #FCFCFC; border: 1px solid #8EAEC3; padding: 10px; height: 49%;">
                                    <div id="report" style="width: 400px; height: 180px; margin-top: auto; margin-right: auto;
                                        margin-bottom: auto; margin-left: auto; position: relative;">
                                        <canvas width="400" height="180"></canvas>
                                        <canvas width="400" height="180" style="position: absolute; left: 0px; top: 0px;"></canvas>
                                        <div class="tickLabels" style="font-size: smaller; color: #545454">
                                            <div style="position: absolute; top: 167px; left: 17px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                00
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 33px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                01
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 49px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                02
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 65px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                03
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 80px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                04
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 96px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                05
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 112px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                06
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 128px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                07
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 144px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                08
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 160px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                09
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 176px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                10
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 192px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                11
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 208px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                12
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 224px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                13
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 240px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                14
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 256px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                15
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 272px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                16
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 288px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                17
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 304px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                18
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 320px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                19
                                            </div>
                                            <div style="position: absolute; top: 167px; left: 336px; width: 16.666666666666668px;
                                                text-align: center" class="tickLabel">
                                                20
                                            </div>
                                            <div style="position:absolute;top:167px;left:352px;width:16.666666666666668px;text-align:center"
                                            class="tickLabel">21</div>
                                        <div style="position: absolute; top: 167px; left: 368px; width: 16.666666666666668px;
                                            text-align: center" class="tickLabel">
                                            22
                                        </div>
                                        <div style="position: absolute; top: 167px; left: 384px; width: 16.666666666666668px;
                                            text-align: center" class="tickLabel">
                                            23
                                        </div>
                                        <div style="position: absolute; top: 154px; right: 382px; width: 18px; text-align: right"
                                            class="tickLabel">
                                            -1.0
                                        </div>
                                        <div style="position: absolute; top: 116px; right: 382px; width: 18px; text-align: right"
                                            class="tickLabel">
                                            -0.5
                                        </div>
                                        <div style="position: absolute; top: 78px; right: 382px; width: 18px; text-align: right"
                                            class="tickLabel">
                                            0.0
                                        </div>
                                        <div style="position: absolute; top: 40px; right: 382px; width: 18px; text-align: right"
                                            class="tickLabel">
                                            0.5
                                        </div>
                                        <div style="position: absolute; top: 2px; right: 382px; width: 18px; text-align: right"
                                            class="tickLabel">
                                            1.0
                                        </div>
                                        <div class="legend">
                                            <div style="position: absolute; width: 120px; height: 40px; top: 13px; right: 13px;
                                                background-color: rgb(255, 255, 255); opacity: 0.85;">
                                            </div>
                                            <table style="position: absolute; top: 13px; right: 13px; font-size: smaller; color: #545454">
                                                <tbody>
                                                    <tr>
                                                        <td class="legendColorBox">
                                                            <div style="border: 1px solid #ccc; padding: 1px">
                                                                <div style="width: 4px; height: 0; border: 5px solid rgb(237,194,64); overflow: hidden">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="legendLabel">
                                                            Total Orders
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="legendColorBox">
                                                            <div style="border: 1px solid #ccc; padding: 1px">
                                                                <div style="width: 4px; height: 0; border: 5px solid rgb(175,216,248); overflow: hidden">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="legendLabel">
                                                            Total Customers
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style="background: #547C96; color: #FFF; border-bottom: 1px solid #8EAEC3; padding: 5px;
                                font-size: 14px; font-weight: bold;">
                                Latest 10 Orders</div>
                            <div style="background: #FCFCFC; border: 1px solid #8EAEC3; padding: 10px;">
                                <table class="list">
                                    <thead>
                                        <tr>
                                            <td class="right">
                                                Order ID
                                            </td>
                                            <td class="left">
                                                Customer Name
                                            </td>
                                            <td class="left">
                                                Status
                                            </td>
                                            <td class="left">
                                                Date Added
                                            </td>
                                            <td class="right">
                                                Total
                                            </td>
                                            <td class="right">
                                                Action
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="center" colspan="6">
                                                text_no_results
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div id="change_fee">
                            <label>
                                <strong>Enter new eMart Fee:</strong></label>
                            <input type="text" />
                            <input type="button" value="Submit" />
                            <label>
                                <strong>Current eMart Fee:</strong></label>
                            <label>
                                <strong>2.0$</strong></label>
                        </div>
                    </div>
                </div>
            </div>
            <br class="clear">
        </div>
        <!-- END Content -->
        <div id="footer">
        </div>
    </div>
    <!-- END Container -->
</body>
</html>
